<template>
  <div class="chat-container">
    <div class="chat-history" ref="chatHistory">
      <div
        class="chat-bubble"
        v-for="(message, index) in messages"
        :key="index"
        :class="{ 'me': message.from === 'me', 'them': message.from !== 'me' }"
      >
        <div class="bubble-content">
          <div class="bubble-text">{{ message.text }}</div>
          <div class="timestamp">{{ message.timestamp }}</div>
        </div>
      </div>
    </div>
    <div class="chat-input-container">
      <div class="input-group">
        <input
          type="text"
          v-model="question"
          placeholder="请输入您的需求"
          class="input-field"
          @focus="scrollToBottom"
        />
        <el-button @click="ask" type="primary" class="btn-ask">发送</el-button>
        <el-button @click="reset" type="text" class="btn-reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getAI } from '@/api/system/ai'

export default {
  name: 'Advice',
  data() {
    return {
      question: '',
      messages: [], // 用于存储聊天记录
      loading: false,
    }
  },
  methods: {
    ask() {
      if (this.question === '') {
        this.$message('请输入需求');
      } else {
        this.loading = true
        getAI(this.question).then((res) => {
          const timestamp = new Date().toLocaleTimeString();
          this.messages.push({
            from: 'me',
            text: this.question,
            timestamp: timestamp,
          });
          this.messages.push({
            from: 'them',
            text: res.result,
            timestamp: timestamp,
          });
          this.question = ''; // 清空输入框
          this.scrollToBottom(); // 滚动到最新消息
          this.loading = false;
        }).catch(error => {
          console.error('Error', error);
        });
      }
    },

    reset() {
      this.question = '';
      this.messages = []; // 重置聊天记录
      this.scrollToBottom(); // 滚动到输入框
    },

    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.chatHistory.scrollTop = this.$refs.chatHistory.scrollHeight;
      });
    },
  },
  mounted() {
    // 假设有一些初始聊天记录（这里仅为示例）
    this.messages = [
      // 填充一些模拟数据...
      {
        from: 'them',
        text: '您好，有什么我可以帮助您的吗？',
        timestamp: '10:00:00',
      },
      // ...更多消息
    ];
    this.scrollToBottom(); // 加载时滚动到输入框
  },
}
</script>

<style scoped>
.chat-container {
  position: relative;
  height: 100vh; /* 假设容器占据整个视口高度 */
  display: flex;
  flex-direction: column;
}
.chat-history {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 垂直滚动条 */
  padding: 10px;
  box-sizing: border-box;
}

.chat-input-container {
  position: sticky; /* 固定在底部 */
  bottom: 0;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}



.chat-bubble {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
padding: 15px;
max-width: 70%;
word-wrap: break-word;
display: inline-block;
}

.chat-bubble.me {

float: right;
clear: both;
background-color: #409eff;
color: #fff;
}

.chat-bubble.me:after {
content: '';
position: absolute;
right: -10px;
top: 10px;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #409eff;
border-bottom-color: #409eff;
border-right-color: #409eff;
border-radius: 50%;
border-width: 10px 20px 10px 0;
margin-top: -10px;
margin-right: -20px;
}

.chat-bubble.them {
float: left;
clear: both;
background-color: #f2f2f2;
color: #000;
}

.chat-bubble.them:after {
content: '';
position: absolute;
left: -10px;
top: 10px;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #f2f2f2;
border-bottom-color: #f2f2f2;
border-left-color: #f2f2f2;
border-radius: 50%;
border-width: 10px 0 10px 20px;
margin-top: -10px;
margin-left: -20px;
}

.bubble-content {
display: flex;
flex-direction: column;
}

.bubble-text {
/* 根据需要调整文本样式 */
}

.timestamp {
font-size: 12px;
color: #999;
margin-top: 5px;
}

.btn-ask {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #409eff; /* 蓝色按钮 */
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.input-field {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  background-color: #fff; /* 输入框背景色设为白色 */}

  .btn-reset {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff; /* 文本按钮背景色设为白色 */
  color: #409eff; /* 文本颜色设为蓝色 */
  cursor: pointer;
  font-size: 16px;
  transition: border-color 0.3s ease;
  margin-left: 10px;
}

</style>
